<template>
	<view>
		<u-form :model="model" :rules="rules" ref="uForm">
			<block v-for="(item,index) in buildData" :key="index">
				<u-form-item :label-width="item.labelWidth || 120" :label="item.label" :prop="item.prop"
					:label-position="item.labelPosition || 'left'" :rightIconStyle="item.rightIconStyle"
					:right-icon="item.rightIcon" :leftIconStyle="item.leftIconStyle" :left-icon="item.leftIcon">
					<block v-if="item.type === 'text' || item.type === 'number'">
						<u-input :border="item.border" :type="item.type" :placeholder="item.placeholder"
							v-model="model[item.vmodel]"></u-input>
						<u-button v-if="item.rightSlot" slot="right" type="success" size="mini" @click="rightSlotClick">
							{{item.rightTips}}</u-button>
					</block>

					<u-input v-else-if="item.type === 'textarea'" :border="item.border"
						:auto-height="item.autoHeight || true" :type="item.type" :placeholder="item.placeholder"
						v-model="model[item.vmodel]"></u-input>
					<u-input v-if="item.type === 'password'" :border="item.border" :password-icon="true"
						:type="item.type" :placeholder="item.placeholder" v-model="model[item.vmodel]"></u-input>

					<block v-else-if="item.type === 'select' && item.selectType === 'action-sheet'">
						<u-input :type="item.type" :border="item.border" :select-open="item.selectShow"
							:placeholder="item.placeholder" v-model="model[item.vmodel]"
							@click="item.selectShow = true"></u-input>
						<u-action-sheet :list="item.selectList" v-model="item.selectShow"
							@click="selectClick($event,item)"></u-action-sheet>
					</block>

					<block v-else-if="item.type === 'select' && item.selectType === 'region-picker'">
						<u-input :type="item.type" :border="item.border" :select-open="item.selectShow"
							:placeholder="item.placeholder" v-model="model[item.vmodel]"
							@click="item.selectShow = true"></u-input>
						<u-picker mode="region" v-model="item.selectShow" @confirm="selectClick($event,item)"
							:default-region="selectDefaultRegion(index,model[item.vmodel])"></u-picker>
					</block>

					<block v-else-if="item.type === 'select' && item.selectType === 'single-column'">
						<u-input :type="item.type" :border="item.border" :select-open="item.selectShow"
							:placeholder="item.placeholder" v-model="model[item.vmodel]"
							@click="item.selectShow = true"></u-input>
						<u-select mode="single-column" :list="item.selectList" v-model="item.selectShow"
							@confirm="selectClick($event,item)"
							:default-value="selectDefaultValue(index,model[item.vmodel])"></u-select>
					</block>

					<u-checkbox-group v-else-if="item.type === 'checkbox'" @change="selectClick($event,item)"
						:width="item.width || 'auto'" :wrap="item.wrap || false">
						<u-checkbox v-model="item2.checked" v-for="(item2, index2) in item.checkboxList" :key="index2"
							:name="item2.label">{{ item2.label }}</u-checkbox>
					</u-checkbox-group>

					<u-radio-group v-else-if="item.type === 'radio'" v-model="model[item.vmodel]"
						@change="selectClick($event,item)" :width="item.width || 'auto'" :wrap="item.wrap || false">
						<u-radio shape="circle" v-for="(item2, index2) in item.radioList" :key="index2"
							:name="item2.label">{{ item2.label }}</u-radio>
					</u-radio-group>
					<u-switch v-else-if="item.type === 'switch'" v-model="model[item.vmodel]" :slot="item.slot || 'right'">
					</u-switch>
					
					<img-upload v-else-if="item.type === 'img-upload'"></img-upload>
				</u-form-item>
			</block>
			<slot></slot>
			<u-button @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	import build from './build.js'
	import buildData from './buildJson.js'
	import imgUpload from '@/components/upload/imgUpload.vue'
	export default {
		mixins: [build],
		components:{
			imgUpload
		},
		props: {
			// 默认填写值
			propModel: {
				type: Object,
				default(){
					return {};
				} 
			},
		},
		data() {
			return {

			}
		},
		mounted() {
			
			this._initData(buildData,this.propModel);
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$emit('valiadte', this.model);
					} else {
						console.log('验证失败');
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
